<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数码首页</title>

    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>


    <link rel="shortcut icon" type="image/x-icon" href="../image/logo.png"/>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
    <link rel="stylesheet " type="text/css" href="../css/index.css"/>
    <link rel="stylesheet" type="text/css" href="../css/address.css">
</head>
<body>
<div class="digital">
    <!-- 头部 -->
    <div class="head">
        <div class="head-x ">
            <div class="head-x-css">
					<span class="layui-breadcrumb" lay-separator="|">
						  <a id="login_state" href="login.html">您好，请登录</a>
						  <a href="register.html">免费注册</a>
						  <a href="#">帮助中心</a>
						  <a href="#">客服</a>
						   
						</span>

            </div>
        </div>
        <!-- 搜索框 -->
        <div class="head-s">
            <ul class="head-s-css">

                <li class="css-logo"><img src="../image/logo.png"/></li>
                <li class="css-text">
                    <ul class="text-ul1">
                        <li class="text"><input id="content" type="text" name="title" placeholder=" 请输入搜索内容"
                                                class="text-input"/></li>
                        <li class="text-s"><a id="select" class="text-btn" href="javascript:void(0)"><img
                                src="../image/搜索.png"/></a></li>

                    </ul>


                    <ul class="layui-tab-title">
                        <li class="layui-this"><a href="index.html"> 首页</a></li>
                        <li><a href="type.html#手机款式 "> 手机款式</a></li>
                        <li><a href="type.html#电脑整机"> 电脑整机</a></li>
                        <li><a href="type.html#家电类型"> 家电类型</a></li>
                        <li><a href="type.html#影音娱乐"> 影音娱乐</a></li>
                        <li><a href="type.html#摄影摄像"> 摄影摄像</a></li>
                    </ul>
                </li>

                <!--头像-->
                <li class="css-touxiang"><a href="#"> <img id="touxiang" src="../image/logo.png"/></a></li>

                <!-- 购物车 -->
                <li class="css-vehicle">
                    <div class="vehicle-img"><a href="ShoppingCart.html"> <img src="../image/购物车.png"/> </a></div>
                    <div class="vehicle-text"><span><a href="ShoppingCart.html">   我的购物车    </a></span></div>
                </li>


            </ul>

        </div>

    </div>

    <div class="main">
        <div class="main-in" id="app">
            <div class="address-list" v-for="(u, index) in userDialogs">
                <el-descriptions class="margin-top" title="收货地址" :column="3" :size="size" border>
                    <template slot="extra">
                        <el-dropdown @command="handleCommand($event,index)">
                            <el-button type="primary">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="add">添加</el-dropdown-item>
                                <el-dropdown-item command="update">修改</el-dropdown-item>
                                <el-dropdown-item command="delete">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            收货人
                        </template>
                        {{u.userInfo.accieveName}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                        </template>
                        {{u.userInfo.accievePhone}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            默认地址
                        </template>
                        <el-switch v-model="u.flag2" v-if="u.userInfo.status == 1"
                                   @change="handleSwitchChange(u.flag2,index)">
                        </el-switch>
                        <el-switch v-model="u.flag1" v-else="u.userInfo.status == 1"
                                   @change="handleSwitchChange(u.flag1,index)">
                        </el-switch>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            备注
                        </template>
                        <el-tag size="small" v-if="u.userInfo.temp">{{u.userInfo.temp}}</el-tag>
                        <el-tag size="small" v-else="u.userInfo.temp">暂无</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            收货地址
                        </template>
                        <template v-if="u.userInfo.aName">
                            {{u.userInfo.aName}}
                        </template>
                        <template v-else>
                            <span class="placeholder-text">暂无收货地址</span>
                        </template>
                    </el-descriptions-item>
                </el-descriptions>

                <el-dialog :model="u" title="编辑用户信息" :visible.sync="u.showDialog" width="50%"
                           @close="handleClose(index)">
                    <el-form label-width="120px">
                        <el-form-item label="收货人">
                            <el-input v-model="u.userInfo.accieveName"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="u.userInfo.accievePhone"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="u.userInfo.temp"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="u.userInfo.aName"></el-input>
                        </el-form-item>
                        <el-form-item label="选择地址">
                            <el-button type="primary" @click="getAddr(index)">定位</el-button>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="doNothing(index)">取消</el-button>
                        <el-button type="primary" @click="saveUserInfo(index)">确定</el-button>
                    </div>
                </el-dialog>

            </div>
        </div>

    </div>

    <!-- 尾部 -->
    <div class="footer">

        <p>商务合作邮箱：v@maoyan.com 客服电话：10105335
            违法和不良信息/涉未成年人有害信息举报电话：4006018900</p>

        <p>用户举报/涉未成年人有害信息举报邮箱：tousujubao@meituan.com
            舞弊线索举报邮箱：wubijubao@maoyan.com</p>

        <p>中华人民共和国增值电信业务经营许可证 京B2-20190350 营业性演出许可证
            京演（机构）（2019）4094号 </p>
    </div>

</div>
</body>

<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/axios.js"></script>
<script>


    var v = new Vue({
        el: '#app',
        data: {
            size: '',
            userDialogs: [], // 用户信息和对话框显示状态的对象数组
            uId: 1,
            isModified: 0,
            aId: '',
            temp:0
        },
        methods: {
            receiveMessage(event) {
                this.userDialogs[this.temp].userInfo.aName = event.data;
                console.log('Received message:', event.data);
            },
            getAddr(index) {
                this.temp = index;
                window.open('baidu.html', '_blank');
            },
            doNothing(index) {
                this.userDialogs[index].showDialog = false; // 修改这行

                if (this.isModified == 1) {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                } else if (this.isModified == 0) {
                    this.$message({
                        type: 'info',
                        message: '已取消添加'
                    });
                }
                setTimeout(() => {
                    location.reload();
                }, 1500); // 延迟1秒钟重新加载页面
            },
            handleSwitchChange(flag, index) {
                v.aId = this.userDialogs[index].userInfo.aId;
                if (flag) {
                    $.get('../address?op=set', {aId: v.aId}, (rs) => {
                        if (rs.code == 200 && rs.data == 1) {
                        } else {
                            this.$message.error('设置失败');
                        }
                    }, 'json');
                    console.log('Switch is ON');
                } else {
                    $.get('../address?op=noSet', {aId: v.aId}, (rs) => {
                        if (rs.code == 200 && rs.data == 1) {
                        } else {
                            this.$message.error('设置失败');
                        }
                    }, 'json');
                }
                setTimeout(() => {
                    location.reload();
                }, 1000); // 延迟2秒钟重新加载页面
            },
            saveUserInfo(index) {
                this.userDialogs[index].showDialog = false; // 修改这行

                let aId = this.userDialogs[index].userInfo.aId;
                let aName = this.userDialogs[index].userInfo.aName;
                let accieveName = this.userDialogs[index].userInfo.accieveName;
                let accievePhone = this.userDialogs[index].userInfo.accievePhone;
                let temp = this.userDialogs[index].userInfo.temp;

                if (this.isModified == 1) {
                    $.get('../address?op=UpdateAddress', {
                        aId: aId,
                        aName: aName,
                        accieveName: accieveName,
                        accievePhone: accievePhone,
                        status: status,
                        temp: temp
                    }, (rs) => {
                        if (rs.code == 200 && rs.data == 1) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('修改失败');
                        }
                    }, 'json');
                } else if (this.isModified == 0) {
                    $.get('../address?op=addAddress', {
                        aId: aId,
                        aName: aName,
                        accieveName: accieveName,
                        accievePhone: accievePhone,
                        status: status,
                        temp: temp,
                        uId: this.uId
                    }, (rs) => {
                        if (rs.code == 200 && rs.data == 1) {
                            location.reload();
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('添加失败');
                        }
                    }, 'json');
                }
            },
            handleClose(index) {
                this.userDialogs[index].showDialog = false;
            },

            handleCommand(command, index) {
                if (command === 'add') {
                    this.isModified = 0;
                    this.userDialogs[index].showDialog = true;
                } else if (command === 'update') {
                    this.isModified = 1;
                    this.userDialogs[index].showDialog = true;
                } else if (command === 'delete') {
                    v.aId = this.userDialogs[index].userInfo.aId;
                    this.isModified = 2;
                    this.deleteAddress();
                }
            },
            deleteAddress() {
                const confirmOptions = {
                    title: '提示',
                    message: '此操作将删除该收货地址, 是否确定?',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                };

                this.$confirm(confirmOptions.title, confirmOptions.message, confirmOptions)
                    .then(() => {
                        if (v.isModified == 2) {
                            $.get('../address?op=DeleteAddress', {aId: v.aId}, (rs) => {
                                if (rs.code == 200 && rs.data == 1) {
                                    location.reload();
                                } else {
                                    this.$message.error('删除失败');
                                }
                            }, 'json');
                        }
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            }
        },
        mounted: function () {
            const  _this = this;
            _this.uId = localStorage.getItem("uId");
            axios.get('../address?op=FindAll&uId=' + this.uId).then(rs => {
                if (rs.status == 200) {
                    console.log(rs.data.data);
                    this.userDialogs = rs.data.data.map(user => ({
                        userInfo: user,
                        showDialog: false, // 对话框的显示状态，默认为 false
                        flag1: false,
                        flag2: true,
                    }));
                }
            });

            window.addEventListener('message', this.receiveMessage);

        }
    });


</script>

</html>
